<template>
  <div class="comment">
    <br>
    <mt-button type="primary" size="large" @click="changePopup" plain>点击选择板块</mt-button>

    <h3 class="title"><span>板块：</span><span>{{value}}</span></h3>
    <mt-popup v-model="popupVisible" position="bottom" class="popup">
      <mt-picker :slots="slots" @change="onValuesChange" value-key="name"></mt-picker>
    </mt-popup>

    <br>
    <commentbox :id="id"></commentbox>
  </div>
</template>

<script>
import commentbox from "../subcomponents/comment.vue";
// import { Picker, Popup } from "mint-ui";

const address = [
  {
    code: "50",
    name: "主页",
    childs: [
      {
        code: "501",
        name: "新闻资讯"
      },
      {
        code: "502",
        name: "图片分享"
      },
      {
        code: "503",
        name: "商品购买"
      },
      {
        code: "504",
        name: "留言反馈"
      },
      {
        code: "505",
        name: "视频专区"
      },
      {
        code: "506",
        name: "联系我们"
      }
    ]
  },
  {
    code: "51",
    name: "会员",
    childs: [
      {
        code: "511",
        name: "选项21"
      },
      {
        code: "512",
        name: "选项22"
      }
    ]
  },
  {
    code: "52",
    name: "购物车",
    childs: [
      {
        code: "521",
        name: "商品购买"
      },
      {
        code: "522",
        name: "结算"
      }
    ]
  },
  {
    code: "53",
    name: "搜索",
    childs: [
      {
        code: "531",
        name: "项目1"
      },
      {
        code: "532",
        name: "项目2"
      }
    ]
  }
];

export default {
  data() {
    return {
      popupVisible: false,
      id: "501",
      value: "",
      myAdress: null,//控制弹出
      slots: [
        {
          flex: 1,
          values: address,
          className: "slot1",
          textAlign: "right"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: address[0].childs,
          className: "slot3",
          textAlign: "left"
        }
      ]
    };
  },
  methods: {
    onValuesChange(picker, values) {
      if (!values[0]) {
        this.$nextTick(() => {
          if (this.myAdress) {
          } else {
            picker.setValues([address[0], address[0], address[0].childs[0]]);
          }
        });
      } else {
        picker.setSlotValues(1, values[0].childs);
        let town = [];
        if (values[1]) {
          town = values[1].childs;
        }
        picker.setSlotValues(2, town);
        
      }
     this.value = picker.getValues()[1].name;
     this.id = picker.getValues()[1].code;
     console.log(this.id)

    },
    changePopup() {
      console.log(this.popupVisible);
      this.popupVisible = !this.popupVisible;
    }
  },
  components: {
    commentbox
  },
  watch:{

  }
};
</script>

<style lang="scss" scoped>
.comment {
  .title{
    text-align: center;
    margin: 10px;
  }
  .popup {
    width: 100%;
  }
}
</style>
